<template>
<!--    调用-->
    <div class="search-videos">
        <el-row>
            <el-col :span="25">
                <el-card :body-style="{ padding: '0px'} ">
                    <img :src="videophoto" class="image">
                    <div style="padding: 14px;">
                        <span>{{videoname}}</span>
                        <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>

<!--                            收藏-->
                            <div @click="collect" :class="{active:isActive}">
                                <i v-if="!isActive" class="el-icon-star-off" ></i>
                                <i v-if="isActive" class="el-icon-star-on" ></i>
                            </div>
<!--                            <span>{{ userId }}</span>-->
                            <el-button type="text" class="button" @click="goplay()">
                                播放
                                </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {mapState} from "vuex"
    import {mapGetters} from "vuex"
    import {mixin} from "../../mixins"

    import {findVideo, setCollect} from "../../api";
    export default {
        name: "search-videos",
        mixins:[mixin],
        components:{

        },
        data(){
          return{
              currentDate: new Date(),
              videoname:[],
              videophoto:'',
              videourl:'',
              videoId:''
            }
        },
        created() {
            this.getVideo()
        },

        computed:{
            ...mapState("user",{
                userId: state=>state.userId
            }),
            ...mapGetters([
                'listOfVideos',
                'loginIn',
                'isActive'
            ])
        },
        methods:{
            getVideo()
            {
                if (!this.$route.query.keywords) {

                    this.$store.commit('setListOfVideos', []);
                    this.notify('null', 'warning')
                } else {
                    findVideo(this.$route.query.keywords).then(res => {

                        //console.log(res)
                        //console.log(res.data.findvideo[0].name)
                        this.videoname=res.data.findvideo[0].name
                        this.videophoto=res.data.findvideo[0].logo
                        this.videourl=res.data.findvideo[0].url
                        this.videoId=res.data.findvideo[0].videoid

                        //this.listVideos=res.data.findvideo[0]

                        if (!res.length) {
                            this.$store.commit('setListOfVideos', []);
                            this.notify('系统暂无符合条件视频', 'warning');
                        } else {
                            console.log(this.$route.query.keywords)
                            this.$store.commit('setListOfVideos', res);
                            this.notify('success', 'success');
                        }
                    }).catch(err => {
                        console.log(err)
                    })

                }
        },
            //收藏
            collect(){
                if(this.loginIn){

                    var params=new URLSearchParams();

                    console.log(this.userId)
                    console.log(this.videoId)

                    params.append('userid',this.userId)
                    params.append('videoid',this.videoId)

                    setCollect(params).then(res=>{
                        // console.log(res)
                        if(res.status===1){
                            this.$store.commit('setIsActive',true);
                            this.notify('收藏成功','success')
                        }else{
                            this.notify('已收藏','error');
                        }
                    })
                }else{
                    this.notify('请先登录','warning')
                }
            },
            goplay(){
                this.$router.push({path:'/play',query:{videourl: this.videourl,videoid:this.videoId}

                })
            },

        },



    }
</script>

<style lang="scss" scoped>
@import "../../assets/css/search-videos";

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>